昨天我們把「我的照片日記」的首頁蓋好了，雖然有歡迎訊息和按鈕，但點下去還是空的。
日記最吸引人的地方，不只是文字，而是 照片與回憶。
所以今天的目標就是：

1. 在前端加入 照片上傳功能
2. 使用 JavaScript 立即預覽 使用者選擇的圖片
3. 確保檔案準備好之後，未來可以上傳到 S3 或呼叫 API

修改 index.html

我們先在首頁加入一個檔案選擇器和圖片預覽區域：

• accept="image/*" → 只允許圖片檔案
• 預覽圖片初始設定為 display:none，還沒選檔案時不顯示

<main>
  <p>歡迎來到我的日記網站！</p>
  
  <!-- 照片上傳表單 -->
  <input type="file" id="photoInput" accept="image/*">
  
  <!-- 預覽圖片 -->
  <div id="previewContainer" style="margin-top:20px;">
    <img id="photoPreview" src="" alt="照片預覽" style="max-width:300px; display:none;">
  </div>
  
  <button class="btn" id="uploadBtn">新增日記</button>
</main>

JavaScript 實作即時預覽

在 index.html 底部加入 <script>：

• FileReader() 可以把使用者選的檔案讀成 base64 格式
• reader.onload：檔案讀取完成後，把結果設定給 <img> 的 src
• display 控制圖片顯示/隱藏

<script>
  const photoInput = document.getElementById('photoInput');
  const photoPreview = document.getElementById('photoPreview');

  // 當使用者選擇檔案時
  photoInput.addEventListener('change', function() {
    const file = this.files[0];
    if (file) {
      // 建立一個本地 URL
      const reader = new FileReader();
      reader.onload = function(e) {
        photoPreview.src = e.target.result;
        photoPreview.style.display = 'block';
      }
      reader.readAsDataURL(file);
    } else {
      photoPreview.src = '';
      photoPreview.style.display = 'none';
    }
  });
</script>

網站測試

• <input type="file" id="photoInput" accept="image/*">：讓使用者選照片
• <img id="photoPreview">：顯示即時預覽
• <script>：JavaScript 讀取檔案並顯示

下面有新增一個「選擇檔案」按鈕，可以挑一張電腦裡的圖片。

選擇之後，照片會馬上顯示在畫面中間，預覽區的最大寬度是 300px，所以不會太大，也不會超出版面。

完成上傳的展示

按下「新增日記」目前只是顯示提示，但未來會把照片+文字存起來，我們就期待後面的成果吧！